<iframe th:replace="common/top.html" width="100%" frameborder="0" scrolling="yes" class="x-iframe"></iframe>
<div id="BackLink">
    <a href="main">Return to Main Menu</a>
</div>
<div id="Catalog">
    <form id="login">
        <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(function() {
                var username = $('#userName');
                var password = $('#password');

                username.blur(function() {
                    if (username.val() === "") {
                        $('#UMSG').text("please input your name");
                    } else {
                        $('#UMSG').text("");
                    }
                })

                password.blur(function() {
                    if (password.val() === "") {
                        $('#PMSG').text("please input your password");
                    } else {
                        $('#PMSG').text("");
                    }
                })

                $('#login').mouseover(function() {
                    if (username.val() !== "" && password.val() !== "") {
                        $('#login').prop('disabled', false);
                    } else {
                        $('#login').prop('disabled', true);
                    }
                })
            })
        </script>

        <div class="login_content" id="login_content">
            <p class="tips">Please enter your username and password.</p>
            <p id="errorMSG"></p>
            <ul class="login_input_list">
                <li class="login_item">Username:<input type="text" name="userName" id="userName">
                    <font id="UMSG"></font>
                </li>
                <li class="login_item">Password:<input type="password" name="password" id="password">
                    <font id="PMSG"></font>
                </li>
            </ul>
        </div>
    </form>
    <a id="submit">登录</a>
    <span id="isRegister">Need a user name and password?<a href="/account/newAccount" class="toRegister"> Register now</a></span>
</div>

<iframe th:replace="common/bottom.html" width="100%" frameborder="0" scrolling="yes" class="x-iframe"></iframe>

<script>
    const errorMSG = document.getElementById('errorMSG');
    const username = document.getElementById('userName');
    const password = document.getElementById('password');
    $('#submit').click(function (){
        $.ajax({
            url: "/signOn",
            method: "POST",
            data: {
                userName: username.value,
                password: password.value
            },
            dataType: "text",
            success: function (data){
                if (data === '""'){
                    location.href="/main"
                }
                errorMSG.innerText=data;
            },
            error: function (error){
                console.log(error);
            }
        })
    })
</script>

